{% extends "base.html" %}

{% block title %}编辑YAML{% endblock %}

{% block head %}
{{ super() }}

{% endblock %}


{% block content %}
<!-- 页面头-->
<section class="content-header">
  <!--头部标题-->
  <h1>
    使用YAML创建
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/blues/blues/clusterler/cluster">集群管理</a></li>
    <li><a href="/blues/blues/clusterler/cluster">概况</a></li>
    <li class="active">使用YAML创建</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div>
        <p>
          <b>集群：</b><span id="cluster_name"></span>&nbsp;&nbsp;&nbsp;
          <b>Api Server：</b><span id="api_server"></span>
        </p>
      </div>
      <div class="flex">
        <textarea class="form-control" rows="25" id="editor"></textarea>
        <!--        <pre id="editor">adfads</pre>-->
      </div>

      <div class="col-xs-12" style="text-align: center">
        {% if session['role'] != 'user'%}
        <button class="btn btn-warning" type="button" id="btn_apply">创建</button>
        {% endif %}

      </div>


    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}

<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>


    // 页面载入后执行
    $(function () {
        // 如果没有传入cluster_id，则返回
        var cluster_id = getQueryString("cluster_id")
        if (cluster_id === ''|| cluster_id === null || cluster_id === undefined) {
            bootbox.alert("未选择集群，先返回上一页选择")
            history.back()
        }
        console.log(cluster_id)

        // 调用接口填写集群名称
        $.ajax({
            method: 'GET',
            url: '/api/v1/cluster/' + cluster_id,
            success: function (result) {
                // let data = JSON.parse(result)  // 文本才需要
                // console.log(result)
                $('#cluster_name').text(result.name)
                $('#api_server').text(result.apiserver)
            }
        })


        // 初始化editor代码编辑区
        var editor
        let l = Math.round(($(window).height() - 200) / 16)
        editor = ace.edit("editor", {
            theme: "ace/theme/textmate",
            mode: "ace/mode/yaml",
            // autoScrollEditorIntoView: true,
            wrap: true,
            maxLines: l,
            minLines: 30,
            navigateWithinSoftTabs: true,
            fontSize: 12
        });

        // 调整窗口大小时，改变代码编辑区大小
        $(window).resize(function () {
            let l = Math.round(($(window).height() - 200) / 16)
            console.log(l)
            editor.setOption("maxLines", l);
        })

        // 应用按钮按下
        $('#btn_apply').click(function () {
            // console.log($('#editor').val())
            $.ajax({
                method: 'POST',
                url: '/api/cluster/' + cluster_id + '/createfromyaml',
                data: JSON.stringify({data: editor.getValue()}),
                dataType: 'text',
                headers: {'Content-Type': 'application/json; charset=utf-8'},
                success: function (result) {
                    let data = JSON.parse(result)
                    console.log(data)
                    bootbox.alert(data.message)
                }
            })

        })

    });
</script>
{% endblock %}